<template>
  <div>
    <!--搜索栏-->
    <el-form :model="formQuery"  :inline="true" style="text-align: left;" class="demo-form-inline">
      <el-form-item label="账户名" >
        <el-input v-model="formQuery.username" placeholder="账户名"></el-input>
      </el-form-item>
      <el-form-item label="网名" >
        <el-input v-model="formQuery.name" placeholder="网名"></el-input>
      </el-form-item>
      <el-form-item label="注册时间" >
        <el-date-picker
            v-model="formQuery.createTimeQueryOfBegin"
            :picker-options="createTimeQueryOfBeginPickerOption"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
        -
        <el-date-picker
            v-model="formQuery.createTimeQueryOfEnd"
            :picker-options="createTimeQueryOfEndPickerOption"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="readAdmins">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="formQuery={};readAdmins();">清空查询条件</el-button>
      </el-form-item>
    </el-form>
    <!-- 工具栏-->
    <div class="item" align="left" style="margin-bottom: 5px;">
      <el-button @click="$refs.adminAddForm.openDialog()" type="primary"  size="mini">添加</el-button>
      <el-button @click="removes" type="primary"  size="mini" :disabled="disabled">删除</el-button>
      <el-button @click="resetPassword" type="primary"  size="mini" :disabled="disabled">重置密码</el-button>
    </div>
    <!-- 表格插件-->
    <el-table
        :data="table.data"
        @selection-change="handleSelectionChange"
        stripe
        border
        style="width: 100%">
      <el-table-column type="selection" width="40" align="center">
      </el-table-column>
      <!--  <el-table-column type="index" width="60" label="序号" align="center">
        </el-table-column>-->
      <el-table-column
          prop="username"
          label="账户名"
          width="180"
      >
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="180">
      </el-table-column>
      <el-table-column
          width="50"
          align="center"
          prop="sex"
          label="性别"
          :formatter="formatSex" >
      </el-table-column>
      <el-table-column
          prop="unLocked"
          label="是否锁定"
          align="center"
          width="120">
        <template v-slot="scope">
          <el-tag effect="dark" :type="scope.row.unLocked?'success':'danger'">{{unlockedMap[scope.row.unLocked]}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="isInitialPassword"
          label="密码状态"
          width="180"
          align="center"
      >
        <template v-slot="scope">
          <el-tag effect="dark" :type="scope.row.isInitialPassword?'danger':'success'">{{isInitialPasswordMap[scope.row.isInitialPassword]}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          align="center"
          prop="createTime"
          label="注册时间">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          align="center"
          width="150">
        <template v-slot="scope">
          <el-button @click="editAdmin(scope.row.id)" type="primary" plain  size="mini" icon="el-icon-edit">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页插件-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        layout="prev,pager,next,total,sizes,jumper"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="table.pageSize"
        :current-page="table.page"
        :total="table.totalRecords"
        :pager-count="11">
    </el-pagination>
    <!-- 管理员添加表单 -->
    <!--自定义方法（刷新表格数据）：@adminTableRefresh="getAdminList" ，用于将adminTableRefresh方法提供给子组件调用，子组件调用方法：this.$emit("adminTableRefresh")-->
    <!-- ref="adminAddForm",通过这个可以调用子组件相应的方法或属性 -->
    <AdminAdd
        ref="adminAddForm"
        @tableRefresh="readAdmins"
    />
    <!-- 管理员编辑表单 -->
    <AdminEdit
        ref="adminEditForm"
        @adminTableRefresh="readAdmins"
    />
  </div>
</template>

<script>
export default {
  name: "AdminManage",
  components: {
    AdminAdd: () => import("@/views/adminmanage/AdminAdd.vue"),//引入管理员添加表单
    AdminEdit: () => import("@/views/adminmanage/AdminEdit.vue"),//引入管理员编辑表单
  },
  data() {
    return {
      formQuery: {},//查询条件
      table: {// 记录表格数据
        data: [],//表格记录
        pageSize: 10,//每页的最大记录数
        page: 1,//当前页
        totalRecords: 0,//总记录数
      },
      disabled:true,//用于批量删除、重置密码按钮的可用性属性，只有当选择了复选框时才可以操作
      tableData: [], //定义一个管理员列表的空数组，用于接收服务端传递过来的数据
      sexMap: {1: '男', 2: '女'},
      isInitialPasswordMap: {true: '初始密码', false: '密码已变更'},
      unlockedMap: {true: '未锁定', false: '锁定'},
      multipleSelection: [], // 复选框选中的值
      allChecked: false,//复选框全选状态
      createTimeQueryOfBeginPickerOption: {//日期插件-开始日期的设置
        disabledDate: time => {
          if (this.formQuery.createTimeQueryOfEnd) {
            // 让开始日期比结束日期少一天，86400000L=1天=24小时*60分钟*60秒*1000毫秒。
            return time.getTime() > new Date(this.formQuery.createTimeQueryOfEnd).getTime()-86400000;
          }
        }
      },
      createTimeQueryOfEndPickerOption: {//日期插件-截止日期的设置
        disabledDate: time => {
          if (this.formQuery.createTimeQueryOfBegin) {
            // 让结束日期比开始日期多一天，86400000L=1天=24小时*60分钟*60秒*1000毫秒。
            return time.getTime() < new Date(this.formQuery.createTimeQueryOfBegin).getTime()+86400000;
          }
        }
      },
    }
  },
  methods: {
    readAdmins() {//读取管理员列表
      //将查询条件整合
      const query = Object.assign(this.formQuery, {
        page: this.table.page,
        pageSize: this.table.pageSize,
      });
      //异步交互
      this.$axios//通过axios组件异步加载
          .get("/backstage/adminmanage", {params: query})
          .then(response => {//data表示服务端返回（答复）的数据，data就是答复的数据内容
            const responseData = response.data;
            if (responseData.success) {//如果加载成功
              this.table.data = responseData.data.data;//给本地的数组变量赋值，获取服务端传递过来的管理账户列表集合
              this.table.totalRecords=responseData.data.totalRecords;
            } else {
              alert(responseData.msg);
            }
          })
          .catch(error => {//网络连接失败调用
            alert("数据读取失败");
          });
    },
    formatSex(row, column) {
      return this.sexMap[row.sex];
    },
    handleCurrentChange(value) {//当分页插件的页码改变时触发，value表示前端分页点击的页码
      this.table.page = value;
      this.readAdmins();
    },
    handleSizeChange(value) {//当分页插件的每页显示数量改变时触发，value表示每页的分页数量
      this.table.pageSize = value;
      this.readAdmins();
    },
    handleSelectionChange(selection){//当选择项发生变化时会触发该事件，这里用于获取选择的记录（多选）.value可以获取所有选择了的行记录row
      this.multipleSelection=selection;
      if(this.multipleSelection.length>0){//如果选择了记录
        this.disabled=false;
      }else{//如果没有选择记录
        this.disabled=true;
      }
    },
    removes(){//批量删除
      if(this.multipleSelection.length>0){
        this.$confirm(" 确定要批量删除这"+this.multipleSelection.length+"个账户吗？", "系统提示", {
          confirmButtonText: "确定",//确定按钮的文本内容
          cancelButtonText: "取消",//取消按钮的文本内容
          type: "warning"
        }).then(() => {//选择确认按钮后执行
          const ids = [];//定义要批量删除的主键
          for (let i = 0; i < this.multipleSelection.length; i++) {
            ids.push(this.multipleSelection[i].id);
          }
          this.$axios
              .delete("/backstage/adminmanage", {
                params: {
                  ids: ids.toString()
                }
              })
              .then(response => {//获取返回数据
                const data=response.data;
                if (data.success) {//操作成功
                  this.readAdmins();//重新加载表格数据
                } else {//操作失败
                  alert(data.msg);
                }
              })
        }).catch(error => {//选择取消按钮后执行
          //console.error(error);
        });
      }
    },
    resetPassword(){ // 批量重置密码
      if(this.multipleSelection.length>0){
        this.$confirm(" 确定要重置这"+this.multipleSelection.length+"个账户的密码吗？", "系统提示", {
          confirmButtonText: "确定",//确定按钮的文本内容
          cancelButtonText: "取消",//取消按钮的文本内容
          type: "warning"
        }).then(() => {//选择确认按钮后执行
          const ids = [];//定义要批量删除的主键
          for (let i = 0; i < this.multipleSelection.length; i++) {
            ids.push(this.multipleSelection[i].id);
          }
          this.$axios//通过axios组件异步加载
              .put("/backstage/adminmanage/password", null,{
                params: {
                  ids: ids.toString()
                }
              })
              .then(response => {//data表示服务端返回（答复）的数据，data就是答复的数据内容
                const data = response.data;
                if (data.success) {//操作成功
                  this.readAdmins();//重新加载表格数据
                } else {//操作失败
                  alert(data.msg);
                }
              })
              .catch(error => {//网络连接失败调用
                alert("数据读取失败");
              });
        }).catch(error => {//选择取消按钮后执行
          //console.error(error);
        });
      }
    },
    editAdmin(id){//点击编辑按钮时出发，编辑相应的账户信息，id为账户的id
      this.$refs.adminEditForm.openDialog(id);//打开账户编辑窗口
    },
  },
  mounted() {//当页面元素加载完成之后，自动执行
    this.readAdmins();
  },
}
</script>

<style scoped>

</style>